<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>通用轮播组件文档 - layui.carousel</title>
	<link rel="stylesheet" href="../libs/layui/layui-2.9.14/dist/css/layui.css">
	<script src="../libs//layui//layui-2.9.14/dist/layui.js"></script>
	<style>


	</style>
</head>

<body style="margin:100px ;">


	<div class="layui-carousel" id="test1" lay-filter="test1">
		<div carousel-item>
			<div style="background-color: #009688;">条目1</div>
			<div style="background-color: #5FB878;">条目2</div>
			<div>条目3</div>
			<div style="background-color: #009688;">条目4</div>
			<div style="background-color: #5FB878;">条目5</div>
		</div>
	</div>
	<!-- 条目中可以是任意内容，如：<img src=""> -->

	<script>
		layui.use('carousel', function () {
			var carousel = layui.carousel;
			//建造实例
			carousel.render({
				elem: '#test1'
				, width: '100%' //设置容器宽度
				, arrow: 'always' //始终显示箭头
				//,anim: 'updown' //切换动画方式
			});

			//触发轮播切换事件
			carousel.on('change(test1)', function (obj) { //test1来源于对应HTML容器的 lay-filter="test1" 属性值
				console.log(obj); //当前条目的索引	
				// console.log(obj.index); //当前条目的索引
				// console.log(obj.prevIndex); //上一个条目的索引
				// console.log(obj.item); //当前条目的元素对象
			});
		});
	</script>



</body>

</html>